<!DOCTYPE html> 
<html> 
	
<!-- Mirrored from jquerymobile.com/demos/1.0b1/docs/forms/plugin-eventsmethods.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 27 Jun 2011 17:13:59 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Form Plugin Methods</title> 
	<link rel="stylesheet"  href="../../../../../code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
	<link rel="stylesheet" href="../assets/css/jqm-docs.css"/>
	<script src="../../../../../code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
	<script src="../assets/js/jqm-docs.js"></script>
	<script src="../../../../../code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Form Plugin Methods</h1>
		<a href="../../index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">

		<p>After jQuery Mobile auto-enhances form controls into custom controls, you can manipulate many of their properties via plugin methods. The currently available methods are listed below. Check Github for updates - we're working on complete coverage.</p>
		
		<h2>Selectmenu</h2>
		<dl>
			<dt>Methods</dt>
			<dd><code>open</code> open a closed select menu</dd>
			<dd>
			<pre><code>
$('select').selectmenu('open');			
			</code></pre>
			</dd>
			
			<dd><code>close</code> close an open select menu</dd>
			<dd>
			<pre><code>
$('select').selectmenu('close');			
			</code></pre>
			</dd>
			
			<dd><code>refresh</code>: Update the custom menu to reflect the native select element's value. If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen.</dd>
			<dd>
			<pre><code>
//refresh value			
$('select').selectmenu('refresh');

//refresh and force rebuild
$('select').selectmenu('refresh', true);
			</code></pre>
			</dd>
			
			<dd><code>enable</code>: enable a disabled select.</dd>
			<dd>
			<pre><code>
$('select').selectmenu('enable');			
			</code></pre>
			</dd>
			
			<dd><code>disable</code>: disable a select.</dd>
			<dd>
			<pre><code>
$('select').selectmenu('disable');			
			</code></pre>
			</dd>
			
		</dl>	
		
		
		
		
		
		
		<h2>Textinput</h2>
		<dl>
			<dt>Methods</dt>
			
			<dd><code>enable</code>: enable a disabled textinput/textarea.</dd>
			<dd>
			<pre><code>
$('input').textinput('enable');			
			</code></pre>
			</dd>
			
			<dd><code>disable</code>: disable a textinput/textarea.</dd>
			<dd>
			<pre><code>
$('textarea').textinput('disable');			
			</code></pre>
			</dd>
			
		</dl>	
		
		
		
		
				
		<h2>checkboxradio</h2>
		<dl>
			<dt>Methods</dt>
			
			<dd><code>enable</code>: enable a disabled checkboxradio.</dd>
			<dd>
			<pre><code>
$('input').checkboxradio('enable');			
			</code></pre>
			</dd>
			
			<dd><code>disable</code>: disable a checkboxradio.</dd>
			<dd>
			<pre><code>
$('input').checkboxradio('disable');			
			</code></pre>
			</dd>
			
			<dd><code>refresh</code>: refresh a checkboxradio's value.</dd>
			<dd>
			<pre><code>
$('input').checkboxradio('refresh');			
			</code></pre>
			</dd>
		</dl>	
		
		
		<h2>slider</h2>
		<dl>
			<dt>Methods</dt>
			
			<dd><code>enable</code>: enable a disabled slider.</dd>
			<dd>
			<pre><code>
$('input').slider('enable');			
			</code></pre>
			</dd>
			
			<dd><code>disable</code>: disable a slider.</dd>
			<dd>
			<pre><code>
$('input').slider('disable');			
			</code></pre>
			</dd>
			
			<dd><code>refresh</code>: refresh a slider's value.</dd>
			<dd>
			<pre><code>
$('input').slider('refresh');			
			</code></pre>
			</dd>
		</dl>
		
		
		<h2>Form buttons</h2>
		<dl>
			<dt>Methods</dt>
			
			<dd><code>enable</code>: enable a disabled button.</dd>
			<dd>
			<pre><code>
$('input').button('enable');			
			</code></pre>
			</dd>
			
			<dd><code>disable</code>: disable a slider.</dd>
			<dd>
			<pre><code>
$('input').button('disable');			
			</code></pre>
			</dd>

		</dl>	
		
		<h2>Degraded Form Input Types</h2>
		<p>jQuery Mobile degrades several HTML5 input types back to type=text, or type=number after adding enhanced controls. For example, inputs with a type of range are enhanced with a custom slider control, and their type is set to number to offer a usable form input alongside that slider. Inputs with a type of search are degraded back to type=text after we add our own themable search input styling.</p>
		<p>The page plugin contains a list of input types that are set to either true which means they'll degrade to type=text, false which means they'll be left alone, or a string such as "number", which means they'll be converted to that type (such as the case of type=range).</p>
		
		<p>You can configure which types are changed via the page plugin's <code>degradeInputs</code> option, which can be manipulated externally via <code>$.mobile.page.prototype.options.degradeInputs</code>, which has properties: color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, and week. Be sure to configure this inside an event handler bound to the <code>mobileinit</code> event, so that it applies to the first page as well as subsequent pages that are loaded.</p>				
		</div><!--/content-primary -->		

		<div class="content-secondary">

			<div data-role="collapsible" data-collapsed="true" data-theme="b">

					<h3>More in this section</h3>

					<ul data-role="listview" data-theme="c" data-dividertheme="d">

						<li data-role="list-divider">Form elements</li>
						<li><a href="docs-forms.html">Form basics</a></li>
						<li><a href="forms-all.html">Form element gallery</a></li>
						<li><a href="forms-text.html">Text inputs</a></li>
						<li><a href="forms-search.html">Search inputs</a></li>
						<li><a href="forms-slider.html">Slider</a></li>
						<li><a href="forms-switch.html">Flip toggle switch</a></li>
						<li><a href="forms-radiobuttons.html">Radio buttons</a></li>
						<li><a href="forms-checkboxes.html">Checkboxes</a></li>
						<li><a href="forms-selects.html">Select menus</a></li>
						<li><a href="forms-themes.html">Theming forms</a></li>
						<li><a href="forms-all-native.html">Native form elements</a></li>
						<li><a href="forms-sample.html">Submitting forms</a></li>
						<li data-theme="a"><a href="plugin-eventsmethods.html">Plugin methods</a></li>

					</ul>
			</div>
		</div>		

	</div><!-- /content -->

	<div data-role="footer" class="footer-docs" data-theme="c">
			<p>&copy; 2011 The jQuery Project</p>
	</div>

	</div><!-- /page -->

	</body>
	
<!-- Mirrored from jquerymobile.com/demos/1.0b1/docs/forms/plugin-eventsmethods.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 27 Jun 2011 17:13:59 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->
</html>
	
